/**
  * Global styles used by Django templates as well as React components
 */

/* Loading spinner */

@mixin loader($size) {
    border: 4px solid #ffffff; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    animation: spin 1s linear infinite;
    border-radius: 50%;
    width: $size;
    height: $size;

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

.loader-sm {
    @include loader(20px);
}

.loader-lg {
    @include loader(60px);
}

.source-tray-handle {
    cursor: row-resize;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    content: "";
}

pre:not(.form-input) {
    overflow-x: auto;
    padding: 1em;
}

.dp-invisible {
    visibility: hidden;
    height: 0 !important;
}
